<template>
  <div class="home-list">
    <ep-advance-card contHeight="200px" :cardContStyle="{ padding: '0 0 0 10px' }" :cardBorderShadow="false">
      <template slot="cardTitle">
        <span>{{ listTit }}</span>
        <a class="float-r" slot="item">查看更多</a>
      </template>
      <ep-skeleton :loading="loading" animated>
        <div slot="template" style="margin-top: 20px; padding: 0 20px 0 0">
          <div v-for="item in 5" :key="item" style="width: 100%; display: flex; justify-content: space-between; margin-bottom: 13px">
            <ep-skeleton-item variant="p" style="width: 120px" />
            <ep-skeleton-item variant="p" style="width: 50px" />
          </div>
        </div>
        <div class="list">
          <div class="list-item" v-for="(item, index) in columnList" :key="index" @click="showJournal(item)">
            <span class="title-item">{{ item.title }}</span>
            <span class="float-r time">{{ item.createTime.split('T')[0] }}</span>
          </div>
        </div>
      </ep-skeleton>
    </ep-advance-card>
    <ep-modal :title="journalInfo.title" v-model="model" width="960px" height="600px">
      <div class="markdown" v-html="journalInfo.content" style="font-size: 14px">
        {{ this.journalInfo.content }}
      </div>
      <span v-if="journalInfo.hasAttachment" style="font-weight: bold; color: black">附件列表:</span>
      <ul v-for="(item, index) in this.journalInfo.attachment" :key="index" :index="index">
        <li>
          <a style="text-decoration: none" :href="item.source" :download="item.name" target="_blank">{{ item.name }}</a>
        </li>
      </ul>
    </ep-modal>
  </div>
</template>

<script>
import EpCms from './api'
import { isEmpty } from '@/utils/data'
var md = require('markdown-it')().set({
  breaks: true,
  html: true
})

export default {
  data() {
    let epcms = new EpCms(this.url, this.auth)
    return {
      loading: true,
      epcms,
      columnList: [],
      journalInfo: {
        contentType: '',
        content: '',
        hasAttachment: false
      },
      model: false
    }
  },
  props: {
    url: {
      type: String,
      default: 'www.singlewindow.sh.cn/epcms-api'
    },
    auth: {
      type: String,
      default: 'easipass'
    },
    title: {
      type: String,
      default: '公告与通知面板'
    },
    column: {
      type: String
    },
    height: {
      type: String,
      default: '320px'
    },
    listTit: {
      type: String
    }
  },
  created() {
    this.epcms
      .columnList(this.column, {
        offset: 1,
        limit: 10
      })
      .then(json => {
        setTimeout(_ => {
          this.loading = false
        }, 1000)
        this.columnList = json.data.rows
      })
  },
  methods: {
    showJournal(props) {
      this.model = !this.model
      this.epcms.journal(props.journalId).then(json => {
        this.journalInfo = json.data
        console.log(json.data)
        if (this.journalInfo.contentType === 'M') {
          this.journalInfo.content = md.render(this.journalInfo.content)
        }
        this.journalInfo.hasAttachment = !isEmpty(json.data.attachment)
      })
    }
  }
}
</script>

<style scoped lang="less">
.home-list {
  /deep/ .ep-advance-card-title {
    a {
      color: #2296f3;
      cursor: pointer;
    }
  }
  /deep/ .markdown {
    img {
      max-width: 100%;
    }
    code {
      white-space: initial;
    }
  }
  .list {
    height: 260px;
    // overflow-y: scroll;
    padding: 10px 5px 10px 0;
    .list-item {
      color: rgba(0, 0, 0, 0.45);
      line-height: 30px;
      cursor: pointer;
      padding-right: 5px;
      .title-item {
      }
    }
    .list-item:hover {
      color: #2296f3;
    }
  }
}
</style>
